<template>
    <div class="order-apply-invoice">
      <div id="lineMain" style="width: 100%; height: 400px;"></div>
    </div>
</template>
<script lang="ts" setup>
import { ref,onMounted, watch,nextTick} from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  lineChartInfo: {
    type: Array,
    default: () => {},
  },
  config: {
    type: Object,
    default: () => {},
  },
})

const linChart = ()=> {
  let option = {
    // dataset: [
    //   {
    //     id: 'dataset_raw',
    //     source: _rawData
    //   },
    //   {
    //     id: 'dataset_since_1950_of_germany',
    //     fromDatasetId: 'dataset_raw',
    //     transform: {
    //       type: 'filter',
    //       config: {
    //         and: [
    //           { dimension: 'Year', gte: 1950 },
    //           { dimension: 'Country', '=': 'Germany' }
    //         ]
    //       }
    //     }
    //   },
    //   {
    //     id: 'dataset_since_1950_of_france',
    //     fromDatasetId: 'dataset_raw',
    //     transform: {
    //       type: 'filter',
    //       config: {
    //         and: [
    //           { dimension: 'Year', gte: 1950 },
    //           { dimension: 'Country', '=': 'France' }
    //         ]
    //       }
    //     }
    //   }
    // ],
    // title: {
    //   text: 'Income of Germany and France since 1950'
    // },
    // tooltip: {
    //   trigger: 'axis'
    // },
    legend: {
      right: '50px',
      top: '30px',
      data: ['美元', '人民币']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: Array.from(props.config.xAxisData)
    },
    yAxis: {
      type: 'value'
    },
    series: [
    {
      name: '美元',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      data: Array.from(props.config.yAxisDataUSD)
    },
    {
      name: '人民币',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      data: Array.from(props.config.yAxisDataCNY)
    }
  ]
  };
  nextTick(() => { 
    echarts.init(document.getElementById('lineMain')).setOption(option);
  })
}

watch(() => props.config,(newVal, oldVal) =>{
  console.log("11111",props.config)
  console.log("22222",props.lineChartInfo)
  linChart()
},{deep:true})
onMounted(() => { 
  // linChart()
})  
</script>
<style lang="scss" scoped></style>